<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>QQ简易聊天框</title>
    <link rel="stylesheet" href="css/chat.css">
</head>
<body>
<section id="chat">
    <div class="chatBody">
        <ul>
            <!-- <li>
                <img src="./images/head01.jpg" alt=""><span>随风</span>
                <p>111111111</p>
            </li> -->
        </ul>
    </div>
    <div><img src="images/icon.jpg"></div>
    <textarea class="chatText"></textarea>
    <div class="btn"><span id="close">关闭(C)</span><span id="send">发送(S)</span></div>
</section>
<script src="./js/jquery-1.12.4.js"></script>
<script>
    $(function(){
        var arr = new Array();
        arr[0] = "head01.jpg";
        arr[1] = "head02.jpg";
        arr[2] = "head03.jpg";

        var names = new Array();
        names[0] = "随风";
        names[1] = "松松";
        names[2] = "玖月奇迹";

        $("#send").click(function(){
            // 随机一个头像
            var index = Math.floor(Math.random()*3);
            var touxiang = arr[index];

            // 随机一个昵称
            var name = names[index];

            // 获取消息文本内容
            var content = $(".chatText").val();

            // 构建节点
            // es6 声明字符串的新方式``````
            var str = `<li>
                            <img src="./images/${touxiang}" alt=""><span>${name}</span>
                            <p>${content}</p>
                        </li>`;

            // // 把历史聊天记录暂存
            // var history = $(".chatBody ul").html();
            // // 追加元素
            // $(".chatBody ul").html(history+str);

            // 方式二
            $(".chatBody ul").append($(str));

        });

        $("#close").click(function(){
            // remove  会删除节点本身
            //$(".chatBody ul").remove();

            // empty 节点内部的元素清空，节点本身还存在
            $(".chatBody ul").empty();
        });


    })
</script>
</body>
</html>